<template>
    <div>
        <el-tabs v-model="activeName" >
            <el-tab-pane label="组织关系接收" name="first">
                <!------用户管理查询按钮------>
                <div class="search">
                    <el-input v-model="name" placeholder="请输入姓名" suffix-icon="el-icon-search" style="width: 220px;"
                              @keyup.enter.native="loadPost">
                    </el-input>
<!--                    <el-select v-model="original" filterable placeholder="请选择原组织" style="margin-left: 5px;">
                        <el-option
                                v-for="item in organizationsData"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code">
                        </el-option>
                    </el-select>-->

                    <el-button type="primary" style="margin-left: 10px;" @click="loadPost">查询</el-button>
                    <el-button type="warning" @click="resetParam">重置</el-button>
                    <el-button type="danger" style="margin-left: 10px;" @click="checkUser">审核</el-button>

                </div>

                <!------信息展示列表------>
                <el-table :data="tableData"
                          :header-cell-style="{color:'#c71111'}"
                          highlight-current-row
                          @current-change="selectCurrentChange">
                    <!--            <el-table-column prop="id" label="ID" width="50">
                                </el-table-column>-->
                    <el-table-column type="index" label="序号" width="50">
                    </el-table-column>

                    <el-table-column prop="studentId" label="学号" width="180" sortable>
                    </el-table-column>

                    <el-table-column prop="name" label="姓名" width="180">
                    </el-table-column>

                    <el-table-column prop="original" label="原组织" width="250" :formatter="formatOriginal" sortable>
                    </el-table-column>

                    <el-table-column prop="transfer" label="转入组织" width="250" :formatter="formatOrganizations" sortable>
                    </el-table-column>

                    <el-table-column prop="statu" label="状态">
                        <template slot-scope="scope">
                            <el-tag
                                    :type="scope.row.statu == 1 ? 'primary' : scope.row.statu == 2 ? 'success' : 'danger'"
                                    disable-transitions>{{scope.row.statu == 1 ? '待转接' : scope.row.statu == 2 ? '已转接' :
                                '已拒绝'}}
                            </el-tag>
                        </template>
                    </el-table-column>
                </el-table>

                <!------分页查询------>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageNum"
                        :page-sizes="[5, 8, 20,30]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>

                <!--------审核列表-------->
                <el-dialog
                        title="提示"
                        :visible.sync="checkDialogVisible"
                        width="30%"
                        center>

                    <el-form ref="form" :rules="rules1" :model="form" label-width="80px">
                        <el-form-item label="学号" prop="studentId">
                            <el-col :span="20">
                                <el-input v-model="form1.studentId" readonly></el-input>
                            </el-col>
                        </el-form-item>

                        <el-form-item label="姓名" prop="name">
                            <el-col :span="20">
                                <el-input v-model="form1.name" readonly></el-input>
                            </el-col>
                        </el-form-item>

                        <el-form-item label="原组织" prop="original">
                            <el-col :span="20">
                                <el-select v-model="form1.original" disabled style="margin-left: 5px;">
                                    <el-option
                                            v-for="item in organizationsData"
                                            :key="item.code"
                                            :label="item.name"
                                            :value="item.code">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-form-item>

                        <el-form-item label="转接组织" prop="transfer">
                            <el-col :span="20">
                                <el-select v-model="form1.transfer" disabled style="margin-left: 5px;">
                                    <el-option
                                            v-for="item in organizationsData"
                                            :key="item.code"
                                            :label="item.name"
                                            :value="item.code">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-form-item>
                    </el-form>

                    <span slot="footer" class="dialog-footer">
                        <el-button type="success" @click="pass">通过</el-button>
                        <el-button type="danger" @click="refuse">拒绝</el-button>
                    </span>
                </el-dialog>
            </el-tab-pane>

            <!----------------------关系转出------------------->
            <el-tab-pane label="组织关系转出" name="second">
                <!------用户管理查询按钮------>
                <div class="search">
                    <el-input v-model="nameTra" placeholder="请输入姓名" suffix-icon="el-icon-search" style="width: 220px;"
                              @keyup.enter.native="loadPostTra">
                    </el-input>

                    <el-button type="primary" style="margin-left: 10px;" @click="loadPostTra">查询</el-button>
                    <el-button type="warning" @click="resetParamTra">重置</el-button>
                    <el-button type="success" style="margin-left: 10px;" @click="toTrans">转接</el-button>
                </div>

                <!------信息展示列表------>
                <el-table :data="tableDataTra"
                          :header-cell-style="{color:'#c71111'}">
                    <!--            <el-table-column prop="id" label="ID" width="50">
                                </el-table-column>-->
                    <el-table-column type="index" label="序号" width="50">
                    </el-table-column>

                    <el-table-column prop="studentId" label="学号" width="180" sortable>
                    </el-table-column>

                    <el-table-column prop="name" label="姓名" width="180">
                    </el-table-column>

                    <el-table-column prop="original" label="原组织" width="250" :formatter="formatOriginal" sortable>
                    </el-table-column>

                    <el-table-column prop="transfer" label="转入组织" width="250" :formatter="formatOrganizations" sortable>
                    </el-table-column>

                    <el-table-column prop="statu" label="状态">
                        <template slot-scope="scope">
                            <el-tag
                                    :type="scope.row.statu == 1 ? 'primary' : scope.row.statu == 2 ? 'success' : 'danger'"
                                    disable-transitions>{{scope.row.statu == 1 ? '待转接' : scope.row.statu == 2 ? '已转接' :
                                '已拒绝'}}
                            </el-tag>
                        </template>
                    </el-table-column>
                </el-table>

                <!------分页查询------>
                <el-pagination
                        @size-change="handleSizeChangeTra"
                        @current-change="handleCurrentChangeTra"
                        :current-page="pageNumTra"
                        :page-sizes="[5, 8, 20,30]"
                        :page-size="pageSizeTra"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalTra">
                </el-pagination>

                <!------转接列表------>
                <el-dialog
                        title="发起组织转接"
                        :visible.sync="centerDialogVisible"
                        width="30%"
                        center>

                    <el-dialog
                            width="60%"
                            title="用户选择"
                            :visible.sync="innerVisible"
                            append-to-body>
                        <SelectUser @doSelectUser="doSelectUser"></SelectUser>
                        <span slot="footer" class="dialog-footer">
                    <el-button @click="innerVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmUser">确 定</el-button>
                  </span>
                    </el-dialog>

                    <el-form ref="formTra" :rules="rules" :model="formTra" label-width="80px">
                        <el-form-item label="姓名" prop="name">
                            <el-col :span="20">
                                <el-input v-model="formTra.name" readonly @click.native="selectUser"></el-input>
                            </el-col>
                        </el-form-item>

                        <el-form-item label="转接组织" prop="transfer">
                            <el-col :span="20">
                                <el-select v-model="formTra.transfer" placeholder="请选择组织" style="margin-left: 5px;">
                                    <el-option
                                            v-for="item in organizationsData"
                                            :key="item.code"
                                            :label="item.name"
                                            :value="item.code">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-form-item>
                    </el-form>

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="centerDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="save">确 定</el-button>
                    </span>
                </el-dialog>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import SelectUser from "../meb/SelectUser";
    import {serverIp} from "../../../public/config";

    export default {
        name: "TransManage",
        components: {SelectUser},
        data() {
            let checkDuplicate = (rule, value, callback) => {
                if (this.formTra.transfer != this.users.organization) {
                    return callback();
                } else {
                    callback(new Error('不能转到本支部'));
                }
            };
            return {
                serverIp:serverIp,
                users: JSON.parse(sessionStorage.getItem('CurUser')),
                activeName: 'first',
                originalData: [],
                organizationsData: [],
                usersData: [],
                tableData: [],
                tableDataTra: [],
                inDialogVisible: false,
                innerVisible: false,
                checkDialogVisible: false,
                currentRow: {},

                pageSize: 8,
                pageNum: 1,
                total: 0,

                totalTra: 0,
                pageSizeTra: 8,
                pageNumTra: 1,

                name: '',
                nameTra: '',
                original: '',
                transfer: '',
                tempUser: {},

                centerDialogVisible: false,
                form: {
                    id: '',
                    studentId: '',
                    name: '',
                    original: '',
                    transfer: '',
                    statu: '',
                },
                formTra: {
                    id: '',
                    studentId: '',
                    name: '',
                    original: '',
                    transfer: '',
                    statu: '',
                },
                form1: {
                    id: '',
                    studentId: '',
                    name: '',
                    original: '',
                    transfer: '',
                    statu: '',
                },
                rules: {
                    name: [
                        {required: true, message: '请输入名字', trigger: 'submit'},
                    ],
                    transfer: [
                        {required: true, message: '请选择组织', trigger: 'blur'},
                        {validator: checkDuplicate, trigger: 'blur'},
                    ],
                },
                rules1: {},

            };
        },
        methods: {
            pass() {
                this.form1.statu = 2;

                this.$axios.post('http://'+ serverIp +':8090/trans/update', this.form1)
                    .then(res => res.data).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: '已同意转接！',
                            type: 'success'
                        });
                        this.checkDialogVisible = false;
                        this.loadPost();
                        this.resetForm()
                    } else {
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }
                })
            },
            refuse() {
                this.form1.statu = 3;
                this.$axios.post('http://'+ serverIp +':8090/trans/refuse', this.form1)
                    .then(res => res.data).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: '已拒绝转接！',
                            type: 'warning',
                        });
                        this.checkDialogVisible = false;
                        this.loadPost();
                        this.resetForm()
                    } else {
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }
                })
            },

            selectCurrentChange(val) {
                this.currentRow = val;
                if (this.currentRow.transfer != this.users.organization) {
                    alert('不能选择本组织转接出去的成员！');
                    this.currentRow = {};
                    return;
                } else {
                    if (this.currentRow.statu != 1) {
                        alert('不能选择已审批的记录');
                        this.currentRow = {};
                        return;
                    }
                }
            },
            checkUser() {
                if (!this.currentRow.id) {
                    alert('请选择记录');
                    return;
                }
                this.checkDialogVisible = true
                this.$nextTick(() => {
                    this.resetForm()
                });
                this.form1.id = this.currentRow.id;
                this.form1.studentId = this.currentRow.studentId;
                this.form1.name = this.currentRow.name;
                this.form1.original = this.currentRow.original;
                this.form1.transfer = this.currentRow.transfer;
            },

            selectUser() {
                this.innerVisible = true
            },

            confirmUser() {
                this.formTra.name = this.tempUser.name;
                this.formTra.studentId = this.tempUser.studentId;

                this.innerVisible = false
            },

            doSelectUser(val) {
                console.log(val);
                this.tempUser = val;
            },

            toTrans() {
                this.formTra.original=this.users.organization;
                this.formTra.statu = 1;
                this.centerDialogVisible = true;
                this.$nextTick(() => {
                    this.resetFormTra()
                });
            },

            formatOriginal(row) {
                let tempOriginal = this.organizationsData.find(item => {
                    return item.code == row.original
                });
                return tempOriginal && tempOriginal.name
            },
            formatOrganizations(row) {
                let temp = this.organizationsData.find(item => {
                    return item.code == row.transfer
                });

                return temp && temp.name
            },

            mounted() {
                // 获取当前用户信息
                const users = JSON.parse(sessionStorage.getItem('CurUser'))
                // 将当前用户的机构名赋值给 form 对象的 organization 属性
                this.form.original = users.organization
            },

            resetForm() {
                this.$refs.form.resetFields();
            },
            resetFormTra() {
                this.$refs.formTra.resetFields();
            },


            del(id) {
                console.log(id);

                this.$axios.get('http://'+ serverIp +':8090/trans/delete?id=' + id)
                    .then(res => res.data).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.centerDialogVisible = false;
                        this.loadPost();
                    } else {
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }
                })
            },

            mod(row) {
                console.log(row);

                this.checkDialogVisible = true
                this.$nextTick(() => {
                    //赋值到表单
                    this.form1.id = row.id;
                    this.form1.studentId = row.studentId;
                    this.form1.name = row.name;
                    this.form1.original = row.organization;
                    this.form1.transfer = row.transfer;
                })
            },

            doMod() {
                this.$axios.post('http://'+ serverIp +':8090/trans/update', this.form)
                    .then(res => res.data).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.centerDialogVisible = false;
                        this.loadPost();
                        this.resetForm()
                    } else {
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }
                })
            },

            doSave() {
                this.$axios.post('http://'+ serverIp +':8090/trans/save', this.formTra)
                    .then(res => res.data).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: '操作成功！',
                            type: 'success'
                        });
                        this.centerDialogVisible = false;
                        this.loadPost();
                        this.resetFormTra()
                    } else {
                        this.$message({
                            message: '操作失败！',
                            type: 'error'
                        });
                    }
                })
            },

            save() {
                this.$refs.formTra.validate((valid) => {
                    if (valid) {
                        this.$axios.post('http://'+ serverIp +':8090/trans/duplicate', this.formTra)
                            .then(response => {
                                if (response.data.code === 200) {
                                    this.doSave(); // 执行保存操作
                                } else {
                                    this.$message.error('请勿重复申请'); // 弹出错误信息
                                }
                            })
                            .catch(error => {
                                this.$message.error('保存失败！');
                            });
                    }
                })
            },

            add() {
                this.centerDialogVisible = true;
                this.$nextTick(() => {
                    this.resetForm();
                    this.mounted()
                })
            },

            resetParam() {
                this.name = '';
                this.loadPost()
            },
            resetParamTra(){
                this.nameTra = '';
                this.loadPostTra()
            },

            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageNum = 1;
                this.pageSize = val;
                this.loadPost()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum = val;
                this.loadPost()
            },
            handleSizeChangeTra(val) {
                console.log(`每页 ${val} 条`);
                this.pageNumTra = 1;
                this.pageSizeTra = val;
                this.loadPostTra()
            },
            handleCurrentChangeTra(val) {
                console.log(`当前页: ${val}`);
                this.pageNumTra = val;
                this.loadPostTra()
            },

            loadPost() {
                this.$axios.post('http://'+ serverIp +':8090/trans/page', {
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    param: {
                        name: this.name,
                        transfer: this.users.organization,
                    }
                }).then(res => res.data).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.tableData = res.data
                        this.total = res.total
                    } else {
                        alert('获取数据失败')
                    }

                })
            },
            loadPostTra() {
                this.$axios.post('http://'+ serverIp +':8090/trans/page', {
                    pageSize: this.pageSizeTra,
                    pageNum: this.pageNumTra,

                    param: {
                        name: this.nameTra,
                        original: this.users.organization,
                    }
                }).then(res => res.data).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.tableDataTra = res.data
                        this.totalTra = res.total
                    } else {
                        alert('获取数据失败')
                    }

                })
            },
            loadOrganizations() {
                this.$axios.get('http://'+ serverIp +':8090/organizations/list').then(res => res.data).then(res => {
                    console.log(res)
                    if (res.code == 200) {
                        this.organizationsData = res.data
                    } else {
                        alert('获取数据失败')
                    }

                })
            },
        },

        beforeMount() {
            this.loadPost();
            this.loadPostTra();
            this.loadOrganizations();

        }
    }
</script>

<style scoped>
    .search {
        margin-bottom: 5px;
    }
</style>